<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead('作品详情')">

</head>

<body>

<div th:replace="head :: header"></div>

<!-- 主体内容 -->
<div id="app" class="works_container clearfix">
    <div class="video">
<!--        <video id="detail-player111" width="100%" height="100%" preload="auto" ></video>-->
        <video controls="" autoplay="false" name="media" id="detail-player111" width="100%" height="100%" preload="auto">
            <source th:src="${video.url}" type="video/mp4">
        </video>
        <div class="bottom clearfix">
            <div class="bottom_con">
                <p th:text="${'播放量：' + video.count}"></p>
                <p th:text="${'评论：' + evaluatesPage.total}"></p>
                <a th:href="@{'/order/ready/1?sameStyleId=' + ${video.id}}" target="_blank">订购同款</a>
                <a href="javascript:void(0)" @click="collect" th:text="${collect eq null ? '收藏' : '取消收藏'}"></a>
            </div>
        </div>
    </div>

    <div class="works_con">
        <div class="works_title">
            <div class="works_title_l">
                <em></em>
                <h3>作品简介</h3>
            </div>
        </div>
        <div class="text">
            <ul>
                <li class="li" th:text="${'名称：' + video.name}"></li>
                <li class="li" th:text="${'摄影师：' + video.photoGrapherUser.nickname}"></li>
                <li class="li" th:text="${'编剧：' + video.scriptWriterUser.nickname}"></li>
                <li th:text="${'简介：' + video.description}"></li>
            </ul>
        </div>

        <div class="comment_box">
            <div class="works_title">
                <div class="works_title_l">
                    <em></em>
                    <h3 th:text="${'作品评论（' + evaluatesPage.total + '条）'}"></h3>
                </div>
            </div>

            <div class="comment_con clearfix" v-for="(item, index) in evaluates" :key=item.id>
                <div class="comment_con_top">
                    <div class="portrait" style="margin-right: 14px;">
                        <img v-if="item.anonymous != 1 && item.evaluateUser.portrait != null && item.evaluateUser.portrait != '' && item.evaluateUser.portrait != undefined" :src="uploadServer + item.evaluateUser.portrait">
                        <img v-if="item.evaluateUser.portrait == null || item.evaluateUser.portrait == '' || item.evaluateUser.portrait == undefined || item.anonymous == 1" th:src="${#request.getAttribute('ctx') + '/static/front/img/user.png'}">
                    </div>
                    <div class="nickname" style="margin-right: 80px;">
                        <p>{{item.anonymous == 1 ? '匿名用户' : item.evaluateUser.nickname}}</p>
                    </div>
                    <div class="star">
                        <i v-for="temp in item.score" class="iconfont icon-iconfontxingxing on"></i>
                        <i v-for="temp in (5 - item.score)" class="iconfont icon-star"></i>
                        <span style="margin-left: 10px;">{{item.score}}.0</span>
                    </div>
                    <div class="time">
                        {{item.createDate | DateFormat('yyyy-MM-dd hh:mm')}}
                    </div>
                </div>
                <div class="comment_con_middle">
                    <div class="label">
                        <ul class="clearfix" v-if="item.tag != null">
                            <li v-for="temp in item.tag.split(',')" v-if="temp != null && temp != ''">{{item|Dict(dictionaries)}}</li>
                        </ul>
                    </div>
                    <p>评价：{{item.comment}}</p>
                </div>
                <div class="comment_con_bottom" v-if="item.reply != null && item.reply != ''">
                    <em></em>
                    <p>管理员回复：{{item.reply}}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部分页 -->
    <div style="display: flex; justify-content: center;">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="prev, pager, next"
                :total="total"
                v-show="evaluates != null && evaluates.length > 0">
        </el-pagination>
        <div v-show="evaluates == null || evaluates.length == 0">
            暂时没有评论!
        </div>
    </div>
</div>

<div th:replace="foot :: body"></div>

</body>

<!-- tencent cloud production -->
<link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js"></script>

<script th:src="${#request.getAttribute('ctx') + '/static/front/js/home.js'}" type="text/javascript" charset="utf-8"></script>

<script th:inline="javascript">
    // $(function() {
    //     var $videoBox = $('#detail-player');
    //     TCPlayer('detail-player', {
    //         fileID: [[${video.url}]],
    //         appID: [[${video.appId}]],
    //         width: $videoBox.width(),
    //         height: $videoBox.height(),
    //         definition: 30,
    //         t: [[${video.t}]],
    //         sign: [[${video.sign}]],
    //         options: {
    //             playbackRates: {}
    //         },
    //         plugins: {
    //             ContinuePlay: { // 开启续播功能
    //                 // auto: true, //[可选] 是否在视频播放后自动续播
    //                 // text:'上次播放至 ', //[可选] 提示文案
    //                 // btnText: '恢复播放' //[可选] 按钮文案
    //             }
    //         }
    //     });
    //     playCount([[${video.id}]]);
    //
    //     // 如果视频加载失败, 更新缓存
    //     setInterval(function () {
    //         if ($('.vjs-errors-dialog').length > 0) {
    //             $.get('/production/api/refresh?videoId=' + [[${video.id}]], function () {
    //                 window.location.reload();
    //             })
    //         }
    //     }, 1000);
    // })

    new Vue({
        el: '#app',
        data: {
            video: [[${video}]],

            evaluates: [[${evaluatesPage.list}]],
            currentPage: [[${evaluatesPage.pageNum}]],
            total: [[${evaluatesPage.total}]],
            pageSize: [[${evaluatesPage.pageSize}]],

            dictionaries: [[${dictionaries}]]
        },

        methods: {
            loadComment: function() {
                var _self = this;
                $.ajax({
                    type: 'get',
                    url: ctx + '/comment/api/list',
                    data: {
                        pageNum: _self.currentPage,
                        pageSize: _self.pageSize,
                        targetType: 6,
                        target: _self.video.id
                    },
                    dataType: 'json',
                    success: function(result) {
                        if (result.status = Messages.HTTP_STATUS.SUCCESS) {
                            if (result.data.list.length > 0) {
                                _self.evaluate = result.data.list;
                                _self.currentPage = result.data.pageNum;
                                _self.total = result.data.total;
                            }
                        }
                    },
                    error: function(e) {
                        ELEMENT.Message.error(Messages.ERROR);
                    }
                })
            },

            handleSizeChange: function(val) {
                this.pageSize = val;
                this.loadComment();
            },

            handleCurrentChange: function(val) {
                this.currentPage = val;
                this.loadComment();
            },

            collect: function(event) {
                var _self = this;
                $.ajax({
                    type: 'post',
                    url: '/personal/collect/2/2/api/collect',
                    data: {
                        dataId: _self.video.id
                    },
                    dataType: 'json',
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                        event.target.disable = true;
                    },
                    success: function (result) {
                        if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                            if (result.data == true) {
                                event.target.text = '取消收藏';
                            } else {
                                event.target.text = '收藏';
                            }
                        } else {
                            ELEMENT.Message.error(result.error);
                        }
                    },
                    error: function (e) {
                        ELEMENT.Message.error(Messages.ERROR);
                    }
                })
                event.target.disable = false;
            }
        }
    })
</script>

</html>
